<template>
  <div class="new-post-container">
    <!-- 成功提示弹窗 -->
    <div v-if="showSuccessModal" class="success-modal">
      <div class="success-content">
        <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
          <circle cx="24" cy="24" r="24" fill="#f5f5dc"/>
          <path d="M14 24L20 30L34 16" stroke="#2ecc71" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <h3>已发布</h3>
        <p>您的问题已成功发布</p>
      </div>
    </div>
    
    <div class="page-header">
      <button class="back-button" @click="goBack">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
          <path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      <h1>发布问题</h1>
    </div>
    
    <div class="new-post-content">
      <form @submit.prevent="submitPost">
        <div class="form-group">
          <label for="post-title">问题标题</label>
          <input
            id="post-title"
            v-model="postTitle"
            type="text"
            placeholder="请输入问题标题"
            required
            class="input"
          />
        </div>
        
        <div class="form-group">
          <label for="post-category">选择分类</label>
          <select
            id="post-category"
            v-model="postCategory"
            required
            class="select"
          >
            <option value="">请选择分类</option>
            <option v-for="category in forumCategories" :key="category.id" :value="category.id">
              {{ category.name }}
            </option>
          </select>
        </div>
        
        <div class="form-group">
          <label for="post-content">问题描述</label>
          <textarea
            id="post-content"
            v-model="postContent"
            placeholder="请详细描述你的问题..."
            required
            class="textarea"
            rows="8"
          ></textarea>
        </div>
        
        <div class="form-group">
          <label for="post-tags">标签（可选）</label>
          <input
            id="post-tags"
            v-model="postTags"
            type="text"
            placeholder="请输入标签，用逗号分隔"
            class="input"
          />
          <p class="form-hint">添加标签可以让更多人找到你的问题</p>
        </div>
        
        <div class="form-actions">
          <button type="button" class="cancel-btn" @click="goBack">取消</button>
          <button type="submit" class="submit-btn">发布问题</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { userState } from '../store.js'

const router = useRouter()
const route = useRoute()

// 获取从URL传入的分类ID（如果有）
const initialCategory = route.query.category || ''

// 帖子表单数据
const postTitle = ref('')
const postContent = ref('')
const postCategory = ref(initialCategory)
const postTags = ref('')

// 成功提示弹窗状态
const showSuccessModal = ref(false)

// 论坛分类数据
const forumCategories = [
  { id: 'pets', name: '宠物' },
  { id: 'beauty', name: '美妆' },
  { id: 'knowledge', name: '知识' },
  { id: 'electronics', name: '电子产品' },
  { id: 'education', name: '教育' },
  { id: 'health', name: '健康医疗' },
  { id: 'finance', name: '金融理财' },
  { id: 'travel', name: '旅游' },
  { id: 'food', name: '美食烹饪' },
  { id: 'career', name: '职场发展' }
]

// 提交帖子
const submitPost = () => {
  // 表单验证
  if (!postTitle.value.trim() || !postContent.value.trim() || !postCategory.value) {
    alert('请填写完整的问题信息')
    return
  }
  
  // 获取当前用户信息
  const currentUser = userState.userInfo || {
    id: 'current_user',
    username: '当前用户',
    avatar: 'https://picsum.photos/200/200?random=user'
  }
  
  // 创建新帖子
  const newPost = {
    id: Math.random().toString(36).substr(2, 9),
    title: postTitle.value.trim(),
    content: postContent.value.trim(),
    category: postCategory.value,
    author: currentUser.username,
    avatar: currentUser.avatar,
    tags: postTags.value.split(',').map(tag => tag.trim()).filter(tag => tag),
    views: 0,
    replies: 0,
    likes: 0,
    time: new Date().toISOString(),
    user: currentUser
  }
  
  // 保存到本地存储
  let allPosts = JSON.parse(localStorage.getItem('posts')) || []
  allPosts.unshift(newPost)
  localStorage.setItem('posts', JSON.stringify(allPosts))
  
  // 同时保存到用户的笔记中
  let allNotes = JSON.parse(localStorage.getItem('notes')) || []
  allNotes.unshift(newPost)
  localStorage.setItem('notes', JSON.stringify(allNotes))
  
  // 显示成功提示弹窗
  showSuccessModal.value = true
  
  // 2秒后跳转到帖子详情页
  setTimeout(() => {
    router.push(`/post/${newPost.id}`)
  }, 2000)
}

// 返回上一页
const goBack = () => {
  router.back()
}
</script>

<style scoped>
.new-post-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
}

.page-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #e67e22;
}

.back-button {
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.back-button:hover {
  background-color: #f5f5f5;
}

.page-header h1 {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.new-post-content {
  background-color: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.input, .select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.2s;
}

.input:focus, .select:focus {
  outline: none;
  border-color: #ff8c00;
}

.textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  resize: vertical;
  transition: border-color 0.2s;
  min-height: 200px;
}

.textarea:focus {
  outline: none;
  border-color: #ff8c00;
}

.form-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #999;
  margin: 0;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.cancel-btn, .submit-btn {
  padding: 12px 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #333;
}

.cancel-btn:hover {
  background-color: #e0e0e0;
}

.submit-btn {
  background-color: #ff8c00;
  color: white;
}

.submit-btn:hover {
  background-color: #e07a00;
  transform: translateY(-1px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .new-post-container {
    padding: 16px;
  }
  
  .new-post-content {
    padding: 20px;
  }
  
  .page-header h1 {
    font-size: 24px;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .cancel-btn, .submit-btn {
    width: 100%;
  }
}
/* 成功提示弹窗样式 */
.success-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.success-content {
  background-color: #f5f5dc;
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  min-width: 300px;
}

.success-content h3 {
  font-size: 24px;
  color: #333;
  margin: 16px 0 8px;
}

.success-content p {
  font-size: 16px;
  color: #666;
  margin: 0;
}
</style>